<template>
  <custom-modal-page :visible.sync="visible">
    <div class="planoperate-container">
      <div class="common-page-header" header="查看">
        <a-button type="primary" ghost class="back-button" @click="goBack()">
          返回
        </a-button>
      </div>
      <div class="planoperate-body">
        <a-form-model ref="ruleForm" :model="ruleForm">
          <custom-collapse :activeKey="activeKey" :panelList="panelList">
            <!-- 填报明细 -->
            <template slot="space_1">
              <div class="task-detail-container">
                <a-row>
                  <a-col v-bind="span"
                    ><a-form-model-item label="月份">
                      <a-input disabled :value="date" /> </a-form-model-item
                  ></a-col>
                  <a-col v-bind="span"
                    ><a-form-model-item label="已完成数量">
                      <a-input
                        disabled
                        :value="completeNumber"
                      /> </a-form-model-item
                  ></a-col>
                </a-row>
              </div>
            </template>
            <!-- 任务清单 -->
            <template slot="space_2">
              <div class="task-list-container">
                <!-- 选择梁号  -- 尽在查看模式下展示 -->
                <div class="choose-beam-number">
                  <a-select
                    placeholder="请选择梁号"
                    show-search
                    allowClear
                    v-model="beamNumber"
                    v-loading="beamNumLoading"
                    :filter-option="filterOption"
                    @change="chooseBeamNumber()"
                  >
                    <a-select-option
                      :value="item.id"
                      v-for="item in beamNumberSource"
                      :key="item.id"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                  <a-button type="primary" @click="chooseBeamNumber()">
                    查询
                  </a-button>
                </div>
                <vxe-table
                  resizable
                  class="scrollbarStyle"
                  :column-config="{ resizable: true }"
                  :sort-config="{ trigger: 'cell' }"
                  ref="xTable"
                  :scroll-x="{ gt: 10 }"
                  :scroll-y="{ gt: 100 }"
                  row-id="id"
                  :tree-config="{
                    transform: true,
                    rowField: 'id',
                    parentField: 'parentId',
                  }"
                  :data="tableData"
                >
                  <vxe-column
                    field="name"
                    title="名称"
                    tree-node
                    width="320px"
                  ></vxe-column>
                  <vxe-column
                    field="completeAndPlan"
                    title="已完成/设计数量"
                    width="180px"
                  ></vxe-column>
                  <vxe-column
                    field="completionPercentage"
                    title="累计完成百分比（%）"
                    width="250px"
                  >
                    <template #default="{ row }">
                      <div class="complete-bar">
                        <div
                          class="bar"
                          :style="{
                            width: row.completionPercentage,
                          }"
                        ></div>
                        <div class="number">{{ row.completionPercentage }}</div>
                      </div>
                    </template>
                  </vxe-column>
                  <vxe-column field="date" title="生产完成时间" width="400px">
                    <template #default="{ row }">
                      {{ row.actualStartTime || "-" }} ~
                      {{ row.actualEndTime || "-" }}
                    </template>
                  </vxe-column>
                  <vxe-column field="date" title="出梁完成时间" width="400px">
                    <template #default="{ row }">
                      {{ row.actualJqStartTime || "-" }} ~
                      {{ row.actualJqEndTime || "-" }}
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </template>
          </custom-collapse>
        </a-form-model>
      </div>
      <div class="pager-container" v-loading="pageloading">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </custom-modal-page>
</template>
<script>
import {
  getACRWList,
  getComponentPartsJDSelect,
} from "@/api/wisdom-beam/planSchedule-app.js";
import { flatTreeData, getPathByKey, getNodeByHierarchy } from "@/utils";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    //时间
    date: {
      type: String,
      default: "",
    },
    //已完成数量
    completeNumber: {
      type: [Number, String],
      default: "",
    },
  },
  data() {
    return {
      beamNumLoading: false,
      beamNumberSource: [],
      beamNumber: undefined,
      pageloading: false,
      isopen: false,
      ruleForm: {
        //计划类型
        category: "0",
        //计划时间
        planTime: undefined,
        //编制人
        people: "",
        // 编制时间
        date: "",
        // 备注
        remark: "",
      },
      activeKey: ["1", "2"],
      submitLoading: false,
      span: {
        xs: 24,
        sm: 24,
        md: 24,
        lg: 12,
        xl: 12,
        xxl: 6,
      },
      panelList: [
        {
          key: "1",
          header: "填报明细",
        },
        {
          key: "2",
          header: "任务清单",
        },
      ],
      tableData: [],
      rawTreeData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getComponentPartsSelect();
          this.getData();
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    chooseBeamNumber() {
      this.getData();
    },

    //查询梁号列表
    getComponentPartsSelect() {
      this.beamNumLoading = true;
      return new Promise((resolve, reject) => {
        getComponentPartsJDSelect({ key: this.date })
          .then((res) => {
            let { data } = res;
            this.beamNumberSource = data?.result ?? [];
            resolve();
          })
          .catch((_) => {
            this.beamNumberSource = [];
            reject();
          })
          .finally((_) => {
            this.beamNumLoading = false;
          });
      });
    },

    //select 搜索过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    getData() {
      let { beamNumber } = this;
      return new Promise((resolve, reject) => {
        this.pageloading = true;
        let { page, pageSize } = this.pager;
        let { date } = this;
        getACRWList({
          page,
          pageSize,
          key: date,
          itemId: this.beamNumber ?? "",
        })
          .then((res) => {
            let { data } = res;
            let source = data?.result ?? {};
            this.pager.total = source?.total ?? 0;
            this.rawTreeData = source?.rows ?? [];
            // 默认展开一级二级
            this.$refs.xTable.setAllTreeExpand(false);
            const rows = getNodeByHierarchy(this.rawTreeData, 2, "children");
            this.$refs.xTable.setTreeExpand(rows, true);

            this.tableData = flatTreeData(source?.rows ?? [], "children");
            if (beamNumber) {
              this.openRowsByIds();
            } else {
            }
            resolve();
          })
          .catch((_) => {
            this.pager.total = 0;
            this.tableData = [];
            reject();
          })
          .finally((_) => {
            this.pageloading = false;
          });
      });
    },

    //展开指定的行
    openRowsByIds() {
      let { rawTreeData, beamNumber } = this;
      let rows = getPathByKey(beamNumber, "id", rawTreeData, false, "children");
      this.$refs.xTable.setTreeExpand(rows, true);
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
    },

    //返回
    goBack() {
      this.$emit("update:visible", false);
    },

    //监听年切换
    yearChange(ev) {
      if (!ev) {
        this.ruleForm.planTime = "";
      }
    },

    // 选择年
    yearPick(e) {
      this.ruleForm.planTime = e;
      this.isopen = false;
    },

    // 选择年后，关闭弹窗
    yearStatus(status) {
      if (status) {
        this.isopen = true;
      } else {
        this.isopen = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.planoperate-container {
  box-sizing: border-box;
  height: 100%;
  .flex();
  flex-direction: column;
  padding: 0 0 0 10px;

  .common-page-header {
    height: 46px;
    background: #fff;
    .flex();
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      font-size: 16px;
      color: #525a5d;
      height: 16px;
      .flex();
      align-items: center;
      border-left: 3px solid var(--primary-color);
      padding-left: 8px;
    }
  }
  .planoperate-body {
    flex: 1;
    background: #fff;
    .custom-scrollbar();
    /deep/.ant-collapse {
      .ant-collapse-item {
        &:last-child {
          border-bottom: none;
        }
      }
    }
    /deep/.ant-form {
      .ant-form-item {
        .flex();
        .ant-form-item-label {
          flex-shrink: 0;
        }
        .ant-form-item-control-wrapper {
          flex: 1;
          .ant-input-affix-wrapper {
            width: 100%;
            textarea {
              height: 80px;
            }
          }
        }
      }
    }
    .task-detail-container {
      padding: 0 80px 0 0;

      /deep/ .ant-form-item-label {
        width: 150px;
      }
      /deep/.ant-calendar-picker {
        width: 100%;
      }
    }
    .task-list-container {
      padding: 0 20px;
      //选择梁号
      .choose-beam-number {
        padding-bottom: 20px;
        .ant-select {
          width: 200px;
        }
        .flex();
      }
      .complete-bar {
        width: 128px;
        height: 10px;
        background: #ebebeb;
        border-radius: 5px;
        position: relative;
        .bar {
          position: absolute;
          height: 100%;
          background: var(--primary-color);
          top: 0;
          left: 0;
          border-radius: 5px;
          max-width: 100%;
        }
        .number {
          top: 50%;
          transform: translateY(-50%);
          left: 140px;
          position: absolute;
          white-space: nowrap;
          color: #666;
          font-size: 14px;
        }
      }
      .choose-template-container {
        padding: 0 0 0 20px;
        .download-model {
          width: 100%;
          height: 80px;
          background: #fafafa;
          border: 1px dashed #e5e5e5;
          .flex();
          align-items: center;
          justify-content: space-between;
          color: #666;
          box-sizing: border-box;
          padding: 0 25px;
          margin-bottom: 7px;
          button {
            padding: 0;
            margin: 0;
            .flex();
            align-items: center;
            justify-content: center;
            cursor: pointer;
            color: var(--primary-color);
            width: 90px;
            height: 36px;
            background: #ffffff;
            border: 1px solid var(--primary-color);
            border-radius: 4px;
          }
        }
        .choose-file-warp {
          width: 100%;
          background: #fafafa;
          border: 1px dashed #e5e5e5;
          box-sizing: border-box;
          padding: 14px 24px 24px 24px;
          .tip {
            padding-bottom: 10px;
            font-size: 14px;
            color: #666666;
          }
          .choose-file {
            width: 100%;
            height: 208px;
            /deep/.ant-upload-list-text {
              display: none;
            }
            /deep/.ant-upload-drag {
              background: #ffffff;
            }
            .ant-upload {
              border: none;
              .icon {
                width: 32px;
                height: 32px;
                background: url("https://jszhgd.cn/static/pc/quality-engineering-app/download.png")
                  no-repeat;
                background-size: 100% 100%;
                margin: 0 auto 10px auto;
              }
              .upload-tip {
                font-size: 14px;
                color: #666;
              }
            }
          }
          .choosed-file-warp {
            .choosed-file {
              align-items: center;
              color: var(--primary-color);
              .name {
                width: 450px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .size {
                margin-left: auto;
              }
              .delete-button {
                width: 20px;
                height: 20px;
                margin-left: 4px;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                margin-left: 4px;
                color: #ff4d4f;
              }
            }
          }
        }
      }
    }
  }
  .pager-container {
    flex-shrink: 0;
  }
}
</style>
